<template>

  <div
    class="filter-container"
    style="padding: 20px 20px 0px"
  >
    <el-form
      :inline="true"
      :model="formData"
      label-position="right"
      size="small"
      class="filter-form-inline"
    >
      <el-form-item
        label="订单参与"
        style="margin-right:20px"
      >
        <el-select
          v-model="formData.selectType"
          clearable
          style="width: 100%"
          placeholder="请选择订单"
          @change="listSearch"
        >
          <el-option
            v-for="(item, idx) in selects"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />

        </el-select>
      </el-form-item>

      <el-form-item
        label="订单类型"
        style="margin-right:20px"
      >
        <el-select
          v-model="formData.orderType"
          clearable
          style="width: 100%"
          placeholder="请选择订单类型"
          @change="listSearch"
        >
          <el-option
            v-for="(item, idx) in orderTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />

        </el-select>
      </el-form-item>
      <el-form-item
        label="订单状态"
        style="margin-right:20px"
      >
        <el-select
          v-model="formData.orderStatus"
          clearable
          style="width: 100%"
          placeholder="请选择订单状态"
          @change="listSearch"
        >
          <el-option
            v-for="(item, idx) in orderStatus.filter(a=>{ return a.value != 1 && a.value != -1 && a.value != 0 })"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />

        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          class="border-btn"
          @click="orderReset"
        >重置</el-button>
        <el-button
          type="primary"
          class="main-btn"
          @click="listSearch"
        >搜索</el-button>
      </el-form-item>
    </el-form>
  </div>

  <table-view
    :data="tableData"
    @sort-change="createChange"
    @row-click="rowClick"
  >
    <el-table-column
      prop="order.orderNumber"
      label="订单编号"
      fixed="left"
      width="150"
      align="center"
      header-align="center"
      show-overflow-tooltip
    />
    <el-table-column
      label="订单类型"
      align="center"
      :min-width="100"
      header-align="center"
    >
      <template #default="scope">
        {{ getLabel('order_type',scope.row.order?.orderType) }}
      </template>
    </el-table-column>
    <el-table-column
      label="发货对象名称"
      align="left"
      :min-width="150"
      header-align="center"
      show-overflow-tooltip
    >
      <template #default="scope">
        <span v-if="scope.row.order && scope.row.order.orderType == 1">{{ scope.row.order.distributeName }}</span>
        <span v-else-if="scope.row.order && scope.row.order.orderType == 2">{{ scope.row.order.terminalName }}</span>
        <span v-else-if="scope.row.order.orderType == 3">{{ scope.row.order.agentName }}</span>
        <span v-else-if="scope.row.order.orderType == 4">{{ scope.row.order.sellerName }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="订单产品"
      :min-width="150"
      header-align="center"
    >
      <template #default="scope">
        <product-popor :list="scope.row.orderDetail" />
      </template>
    </el-table-column>
    <el-table-column
      sortable="custom"
      label="下单日期"
      :min-width="120"
      align="center"
      header-align="center"
    >
      <template #default="scope">
        {{ dateFormat('yyyy-mm-dd',scope.row.order.putOrderTime) }}
      </template>
    </el-table-column>
    <el-table-column
      prop="order.headName"
      label="负责营销职员"
      :min-width="110"
      align="center"
      header-align="center"
    />
    <el-table-column
      sortable="custom"
      prop="processNo"
      label="创建时间"
      :min-width="150"
      align="center"
      header-align="center"
    >
      <template #default="scope">
        {{ dateFormat('yyyy-mm-dd HH:MM',scope.row.order.createdAt) }}
      </template>
    </el-table-column>
    <el-table-column
      label="状态"
      fixed="right"
      align="center"
      width="150"
      header-align="center"
    >
      <template #default="scope">
        <div class="tab-line">
          <div>{{ getStatus(scope.row) }}</div>
        </div>

      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      fixed="right"
      header-align="center"
      width="150"
    >
      <template #default="scope">
        <div v-if="scope.row.order.flowStatus != 'DOING'">
          <el-button
            v-auth="{v:['crm:order:delivery:pms'],bool:(scope.row.order.orderStatus == 2 || scope.row.order.orderStatus == 3) && !scope.row.order.ifAllDelivery}"
            type="text"
            @click.stop="onDelivery(scope.row)"
          >发货</el-button>
          <el-button
            v-auth="{v:['crm:order:goods:pms'],bool:scope.row.order.orderStatus == 3 || scope.row.order.orderStatus == 4}"
            type="text"
            @click.stop="onGoods(scope.row)"
          >确认收货</el-button>
          <!--          <el-button-->
          <!--            v-if="scope.row.order.orderStatus == 0 || scope.row.order.orderStatus == 5"-->
          <!--            class="delete-text-btn"-->
          <!--            type="text"-->
          <!--            @click.stop="onDelete(scope.row)"-->
          <!--          >删除</el-button>-->
          <!--          <el-button-->
          <!--            v-if="scope.row.order.orderStatus == 0"-->
          <!--            type="text"-->
          <!--            @click.stop="onEdit(scope.row)"-->
          <!--          >编辑</el-button>-->

        </div>

        <!--                            <el-button type="text">删除</el-button>-->
      </template>
    </el-table-column>

  </table-view>

  <Pagination
    v-model:page="formData.page"
    v-model:limit="formData.pageSize"
    style="display: flex; justify-content: flex-end"
    :total="total"
    @pagination="getList"
  />

  <delivery-dialog
    ref="refDelivery"
    @success="getList"
  />

</template>

<script>
import productPopor from './productPopor'
import orderList from '../../../../../mixins/orderList'
import deliveryDialog from '../../modules/deliveryDialog'
import {defineComponent, reactive, toRefs} from 'vue'

export default defineComponent({
  name: 'OrderList',
  components: { deliveryDialog, productPopor },
  setup() {
    var order = orderList('goods')
    var data = reactive({
      refDelivery: null,
    })

    const onDelivery = (row) => {
      data.refDelivery.openDialog(row)
    }

    return {
      ...toRefs(order),
      ...toRefs(data),

      onDelivery,
    }
  },
})
</script>

<style scoped>
</style>
